<link rel="stylesheet" href="/assets/home/css/details.css" />
<!-- 加载ckplayer视频插件 -->
<link rel="stylesheet" href="/assets/home/plugin/ckplayer/css/ckplayer.css">
<script src="/assets/home/plugin/ckplayer/js/ckplayer.min.js"></script>'
<!-- 请求 -->
<script src="/assets/home/plugin/axios/axios.min.js"></script>
<script src="/assets/home/plugin/axios/request.js"></script>
<!-- 评分插件 -->
<link rel="stylesheet" href="/assets/home/plugin/raty/raty.css" />
<script src="/assets/home/plugin/raty/raty.min.js"></script>
<!-- 上拉刷新 -->
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>

<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <div class="nav">
        <ul id="tab">
            <li class="active" data-type="course">课程</li>
            <li data-type="info">详情</li>
            <li data-type="comment">评论</li>
        </ul>
    </div>
</header>

<div id="tab-content">
    <div id="course" class="active">
        <div id="cover">
            <!-- 课程封面 -->
            <img class="cover_bg" src="{$info.thumbs_text}">
            <!-- 中间播放键 -->
            <div id="play">
                <img src="/assets/home/images/play.png" />
            </div>
        </div>

        <!-- ckplayer视频容器元素 -->
        <div id="video"></div>

        <!-- 课程信息 -->
        <div class="head">
            <div class="info">
                <h4 class="name">{$info.title}</h4>
                <div class="action">
                    {if condition="$info['likes_active']"}
                    <!-- 点赞 -->
                    <img class="thumbs" src="/assets/home/images/thumbs-up.png" alt="">
                    {else /}
                    <!-- 未点赞 -->
                    <img class="thumbs" src="/assets/home/images/thumbs.png" alt="">
                    {/if}
                    <span class="num">{$info.likes_text}</span>
                </div>
            </div>
            <ul>
                <li>
                    <span>课程分类：</span>{$info.category.name ? $info.category.name : '未知分类'}
                </li>
                <li>
                    <span>课程价格：</span>
                    <span class="price">￥{$info.price}</span>
                </li>
                <li>
                    <span>章节总数：</span>{$info.chapter}
                </li>
                <li>
                    <span>发布时间：</span>{$info.createtime}
                </li>
            </ul>
        </div>

        <!-- 授课老师 -->
        <div class="teacher">
            <div class="title">授课老师</div>
            <div class="info">
                <div class="left">
                    <div class="avatar">
                        <a href="#">
                            <img src="{$info.teacher.avatar_text ? $info.teacher.avatar_text : '暂无授课老师'}" alt="">
                        </a>
                    </div>
                </div>
                <div class="right">
                    <div class="name">
                        <a href="#">
                            {$info.teacher.name ? $info.teacher.name : '暂无授课老师'}
                        </a>
                    </div>
                    <div class="job">{$info.teacher.job}</div>
                    <div class="content">
                        {$info.teacher.content}
                    </div>
                </div>
            </div>
        </div>

        <div class="chapter">
            <div class="title">课程章节</div>
            <ul>
                {if condition="$chapterList"}
                {foreach $chapterList as $key=>$item}
                <li onclick="Paydata(`{$item.id}`)">{$key + 1}、 {$item.title}</li>
                {/foreach}
                {else /}
                <li>暂无课程章节</li>
                {/if}
            </ul>
        </div>

        <!-- 购买 -->
        <div class="footer">
            <div class="footer-box">
                <div class="collection">
                    {if condition="$info['collection_active']"}
                    <img src="/assets/home/images/rate_active.png" alt="">
                    已收藏
                    {else /}
                    <img src="/assets/home/images/rate.png" alt="">
                    收藏
                    {/if}
                </div>
                {if condition="$info['order_active']"}
                <a class="btn disabled">已购买课程</a>
                {else /}
                <a href="{:url('home/subject/confirm', ['subid' => $info.id])}" class="btn">购买</a>
                {/if}
            </div>
        </div>
    </div>

    <div id="info">
        <div class="mui-table-view content">{$info.content}</div>
    </div>

    <div id="comment">
        <!-- 搜索框 -->
        <div class="mui-input-row mui-search">
            <input id="keywords" type="search" class="mui-input-clear" placeholder="请输入课程名称" name="search" />
        </div>

        <div id='commentList' class="mescroll" style="height: 83vh">
            <!-- 评论内容 -->
            <div class="mui-table-view list">
            </div>
        </div>
    </div>
</div>

<!-- 弹出菜单 -->
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a id="buy" href="javascript:void(0)">
                立即购买
            </a>
        </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#sheet1"><b>取消</b></a>
        </li>
    </ul>
</div>

<script>

    $('#tab li').click(function () {
        let type = $(this).data('type');

        $(this).addClass('active').siblings().removeClass('active');
        $('#tab-content #' + type).addClass('active').siblings().removeClass('active');
    })


    $("#iosActionsheetCancel").click(function () {
        mui('#sheet1').popover('toggle');
    })

    // 点击播放
    $("#play").on('click', function () {
        Paydata()
    })

    // 播放视频
    async function Paydata(chpaterid) {
        let result = await POST({
            url: `{:url('home/subject/play')}`, params: {
                subid: `{$info.id}`,
                chpaterid: chpaterid
            }
        });
        if (result.code === 0) {
            mui.toast(result.msg);
            if (result.url) {
                setTimeout(() => {
                    location.href = `{:url('home/index/login')}`
                }, 1000)
            }

            mui('#sheet1').popover('toggle');

            return false;
        }

        let url = result.data ? result.data.url : '';
        if (!url) {
            mui.toast('暂无视频播放');
            return false;
        }

        $("#cover").css('display', 'none');
        $("#video").css('display', 'block');

        var videoObject = {
            container: '#video',//视频容器的ID
            video: url,//视频地址
            autoplay: true,//是否自动播放
            smallWindows: true,//是否启用小窗口模式
        }

        new ckplayer(videoObject);
    }

    $("#buy").on('click', function () {
        mui('#sheet1').popover('toggle');
        location.href = `{:url('home/subject/confirm')}?subid={$info.id}`;
    })

    $(".thumbs").click(async function () {

        let result = await POST({
            url: `{:url('home/subject/likes')}`, params: {
                subid: `{$info.id}`,
                busid: `{$Business.id}`
            }
        });

        mui.toast(result.msg);
        if (result.code === 0) {
            if (result.url) {
                setInterval(function () {
                    location.href = `{:url('home/index/login')}`;
                }, 1000);
            }

            return false;
        }

        setTimeout(() => {
            location.reload();
        }, 1000);
    });

    $(".collection").click(async function () {

        let result = await POST({
            url: `{:url('home/subject/collection')}`, params: {
                subid: `{$info.id}`,
                busid: `{$Business.id}`
            }
        });

        mui.toast(result.msg);
        if (result.code === 0) {
            if (result.url) {
                setInterval(function () {
                    location.href = `{:url('home/index/login')}`;
                }, 1000);
            }

            return false;
        }

        setTimeout(() => {
            location.reload();
        }, 1000);
    });

    // 页码
    let page = 1;
    var mescroll = new MeScroll("commentList", { //第一个参数"mescroll"对应上面布局结构div的id
        //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
        down: {
            callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        up: {
            callback: upCallback, //上拉加载的回调
            empty: {
                tip: "暂无相关数据~" //提示
            },
        }
    });
    //下拉刷新的回调
    function downCallback() {
        // 处理方式一: 重置mescroll内部变量(如mescroll.num=1和mescroll.hasNext=true), 自动触发upCallback
        mescroll.resetUpScroll();
        $("#commentList .list").html('');
    }
    //上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    async function upCallback(val) {
        page = val.num

        let result = await POST({
            url: `{:url('home/subject/comment')}`, params: {
                page: page,
                keywords: $("#keywords").val(),
                subid: `{$info.id}`
            }
        });

        if (result.code == 0) {
            mui.toast(result.msg);
            mescroll.endBySize(0, 0);
            return false;
        }

        let list = result.data.list ?? [];
        let count = result.data.count ?? 0;

        //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
        //必传参数(当前页的数据个数, 总数据量)
        mescroll.endBySize(list.length, count);

        getPageData(list)
    }
    // 处理数据
    function getPageData(list) {
        let html = '';
        for (let i = 0; i < list.length; i++) {
            let item = list[i];
            html += `
                    <li class="mui-table-view-cell mui-media">
                        <img class="mui-media-object mui-pull-left userimg" src="${item.business.avatar_text}">
                        <div class="mui-media-body">
                            <div class="header">
                                <span class="nickname">${item.business.nickname}</span>
                            </div>
                            <p>${item.content}</p>
                            <div class="rate">
                                <span>
                                    <div class="weui-cell">
                                        <div class="weui-cell__bd">
                                            <div class="raty" data-raty="${item.rate}"
                                                style="display: flex; flex-direction: row;">
                                            </div>
                                            <input type="hidden" name="rate" id="rate">
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                    </li>
                `;
        }
        $("#commentList .list").append(html);
        // 评分插件
        var rateList = Array.from(document.getElementsByClassName('raty'));
        rateList.forEach(rate => {
            const raty = new Raty(rate, {
                score: rate.getAttribute('data-raty'), // 初始分数
                size: 10,
                starHalf: "/assets/home/plugin/raty/images/star-half.png", // 半星的图片的地址
                starOff: "/assets/home/plugin/raty/images/star-off.png",  // 空星的图片的地址
                starOn: "/assets/home/plugin/raty/images/star-on.png",  //满星的图片的地址
                halfShow: true,   //显示半星
                readOnly: true, //只读
            });
            raty.init()
        });

    }
    // 搜索
    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            downCallback();
        }
    });

    // 页面加载完成后, 自动触发一次上拉加载
    // mescroll.upCallback();
</script>